<template>
	<section class="checkIn">
		<common-head></common-head>
		<div class="width">
			<check-in-top :currentIndex="currentIndex"></check-in-top>

			<div class="centre" v-show="currentIndex===0 && $store.state.hasOrder"><!--选择楼层-->
				<choose-floor ></choose-floor>
			</div>

			<div class="centre" v-show="currentIndex===0 && !$store.state.hasOrder"><!--选择楼层-->
				<!--表单-->
				<el-form  style="margin-top: 20px;" :model="formInline"  label-position="left" label-width="100px">

				  <el-form-item label="选择房型">
				  	<el-radio-group v-model="formInline.homeType">
				      <el-radio label="特殊房型"></el-radio>
				      <el-radio label="大床房"></el-radio>
				      <el-radio label="标准双人间"></el-radio>
				      <el-radio label="豪华双人间"></el-radio>
				      <el-radio label="豪华套房"></el-radio>
				    </el-radio-group>
				  </el-form-item>

                  <el-form-item label="入住人数">
                      <template>
                          <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                      </template>
                  </el-form-item>


				   <el-form-item label="入住时间" style="width: 460px;">
                       <div class="block">
                           <el-date-picker
                             v-model="value6"
                             type="datetimerange"
                             start-placeholder="开始日期"
                             end-placeholder="结束日期"
                             :default-time="['12:00:00']">
                           </el-date-picker>
                         </div>

				  </el-form-item >

				  <!-- <el-form-item label="入住人信息">
				  	<p>
					  	<el-input style="width: 180px;" v-model="formInline.customer[0].customerName" placeholder="姓名"></el-input>
					  	<el-input style="width: 450px;" v-model="formInline.customer[0].shenFZ" placeholder="身份证号码"></el-input>
                        <span style="width:30px;"><i class="el-icon-circle-plus" style="color:#67C23A" @click='addPlusOnes()'></i></span>
				  	</p>
                    <p style="margin-top:10px; " v-if='addPlusOne'>
					  	<el-input style="width: 180px;" v-model="formInline.customer[0].customerName" placeholder="姓名"></el-input>
					  	<el-input style="width: 450px;" v-model="formInline.customer[0].shenFZ" placeholder="身份证号码"></el-input>
				  	</p>
				  </el-form-item> -->

				  <!-- <el-form-item label="联系手机">
				  	<p>
					  	<el-input style="width: 180px;" v-model="formInline.phone" placeholder="联系电话"></el-input>
				  	</p>
				  </el-form-item> -->
				</el-form>
				<!--表单-->

				<choose-floor ></choose-floor>
			</div>

			<!--***********************************************************-->

			<div class="currentIndex1" v-show="currentIndex===1"><!--核验身份-->
				<p class="li" v-for="(item,index) in currentIndex1">
					<span class="first">{{item.name}}</span>
					<span class="second">{{item.shengfenzheng}}</span>
					<span class="third" v-show="item.clickHeYan===0" @click="heYan(index)">点击核验</span>
					<span class="four" v-show="item.clickHeYan===1">核验成功</span>
					<span class="five" v-show="item.clickHeYan===2">核验失败</span>
				</p>
				<!-- <p style="margin-top: 70px;">
					<img src="../assets/20180922203057.png"/>
					<p>请将你的身份证放在校验区</p>
				</p> -->
			</div>
			<!--***********************************************************-->

			<div class="currentIndex2" v-show="currentIndex===2"><!--付款-->
				<p class="pay_money">您需要支付<span>￥{{currentIndex2.money}}</span></p>
                <p style="color:#666; line-height:30px; clear:both;">
                    <span style="float:left;">房型：舒适双人房</span>
                    <span style="float:right;">入住时间：2018-09-25至2018-09-26 共1晚</span>
                </p>
                <br/>
                <p style="color:#666; margin-bottom:20px;line-height:30px; clear:both; ">
                    <span >入住人：黄依依，陈一梅</span>
                </p>
                <hr/>
                <br/>
				<span style="color: rgb(122, 115, 115);font-size: 15px; ">请选择支付方式</span>
				<p class="three_pay" style="margin: 20px 0; text-align: center;">
					<span >
						<img v-show="currentIndex2.wxPay===0" @click="currentIndex2Choose('wxPay')" src="../assets/weixin2.png"/>
						<img v-show="currentIndex2.wxPay===1" src="../assets/weixin1.png"/>
					</span>
					<span>
						<img v-show="currentIndex2.tbPay===0" @click="currentIndex2Choose('tbPay')" src="../assets/zhifubao1.png"/>
						<img v-show="currentIndex2.tbPay===1" src="../assets/zhifubao2.png"/>
					</span>
					<span>
						<img v-show="currentIndex2.bankPay===0"  @click="currentIndex2Choose('bankPay')" src="../assets/yinhangka2.png"/>
						<img v-show="currentIndex2.bankPay===1"  src="../assets/yinhangka1.png"/>
					</span>
				</p>
				<p style="text-align: center;margin: 70px 0;">
					<img v-show="currentIndex2.currentPay==='wxPay'" src="../assets/20180923140627.png"/>
					<img v-show="currentIndex2.currentPay==='tbPay'" src="../assets/20180923140627.png"/>
					<img v-show="currentIndex2.currentPay==='bankPay'" src="../assets/20180923140642.png"/>
				</p>
			</div>
			<!--***********************************************************-->

			<div class="" v-show="currentIndex===3"><!--取房卡-->
                <p style="text-align:center; margin-top: 30px; font-size:18px;">
                    请在出口卡领到房卡
                </p>
				<p style="text-align: center;    margin: 10px 0;">
					<!-- <img src="../assets/0180923174419.png"/> -->

					<img src="../assets/card.gif"/>
				</p>
			</div>
			<!--*****************************其余部件-->
			<p class="span_bottom">
				<span class="back " @click="back" v-show="currentIndex!=0">上一步</span>
				<span class="next " @click="next" v-show="currentIndex!=3">下一步</span>
				<span class="next "  v-show="currentIndex===3" >完成</span>
				<!--{{$store.state.hasOrder}}-->
			</p>


			<el-dialog
			  title="身份核验"
			  :visible.sync="currentIndex1dialogVisible"
			  width="640px"
			  >
			  <heyan :goOnHeyan="goOnHeyan" @changeHeYanPeople="changeHeYanPeople" :heyanPeople="heyanPeople"></heyan>
			</el-dialog>
		</div>
	</section>
</template>

<script>
	import commonHead from "@/components/head"
	import chooseFloor from "@/components/chooseFloor"
	import checkInTop from "@/components/checkInTop"
	import heyan from "@/components/heyan"
	export default{
		components:{
			commonHead,
			chooseFloor,
			checkInTop,
			heyan
		},
		data(){
			return{
				heyanPeople:0,
				formInline:{
					homeType:'',
					inDate:'',
					outDate:'',
					customer:[
						{
							customerName:'',
							shenFZ:'',
						}
					],
					phone:'',

				},
				currentIndex:0,
				currentIndex1:[
					{
						name:'潘毅一',
						shengfenzheng:440682199562645552,
						clickHeYan:0,
					},
					{
						name:'潘毅一',
						shengfenzheng:440682199562645552,
						clickHeYan:0,
					}
				],
				currentIndex2:{
					money:298,
					wxPay:0,
					tbPay:0,
					bankPay:0,
					currentPay:'',
				},
				currentIndex1dialogVisible:false,
                value6: '',
                addPlusOne: false,
                num1: 1,
                goOnHeyan:true,
			}
		},
		methods:{
			changeHeYanPeople(){
				this.currentIndex1[this.heyanPeople].clickHeYan=1;
					for (let i = 0; i < this.currentIndex1.length; i++) {
						if( this.currentIndex1[i].clickHeYan!=1){/*不经过核验*/
							this.goOnHeyan=true;
							this.heyanPeople = i ;
							break;
						}else{
							this.goOnHeyan=false;
						}
					}


//				if(this.heyanPeople===this.currentIndex1.length-1){}
			},
			back(){/*上一步*/
				this.currentIndex--;
			},
			next(){/*下一步*/
				if(!this.$store.state.hasOrder){
					this.$store.commit('switchOrder',true);
				}
				this.currentIndex++;
			},
			heYan(val){/*核验*/
				this.currentIndex1dialogVisible = true;
				this.heyanPeople = val;/*这是第几个核验人*/
			},
			currentIndex2Choose(val){/*选择支付方式*/
				this.currentIndex2.wxPay=0;
				this.currentIndex2.tbPay=0;
				this.currentIndex2.bankPay=0;
				switch (val){
					case 'wxPay':
						this.currentIndex2.wxPay=1;
						break;
					case 'tbPay':
						this.currentIndex2.tbPay=1;
						break;
					case 'bankPay':
						this.currentIndex2.bankPay=1;
						break;
					default:
						break;
				}
				this.currentIndex2.currentPay=val;
			},
            addPlusOnes(){
                this.addPlusOne = true;
            },
            handleChange(value) {
                console.log(value);
            }
		},
		watch:{
			listenHasOrder(newVal,oldVal){
				console.log(newVal,oldVal);
			}
		},
		computed:{
			listenHasOrder(){
				return this.$store.state.hasOrder;
			},
		},
	}
</script>

<style>
	.checkIn .el-radio__input.is-checked .el-radio__inner{
		    border-color: rgb(214,114,2);
    		background: rgb(214,114,2);
	}
	.checkIn .el-radio__input.is-checked+.el-radio__label {
    	color:rgb(214,114,2);
	}
	.checkIn .currentIndex2 .pay_money{
		text-align: center;
		text-align: center;
	    margin: 25px 0;
	    font-size: 20px;
	    color: rgb(214,114,2);
	}
	.checkIn .currentIndex2 .pay_money span{
		 font-size: 26px;
	}

	.checkIn .currentIndex1 .li .first{
		float: left;
	}
	.checkIn .currentIndex1 .li .third{
		float: right;
		cursor: pointer;
		color:  rgb(214,114,2);
	}
	.checkIn .currentIndex1 .li .four{
		float: right;
		cursor: pointer;
		color: green;
	}
	.checkIn .currentIndex1 .li .five{
		float: right;
		cursor: pointer;
		color: red;
	}
	.checkIn .currentIndex1{
		margin-top: 15px;
	}
	.checkIn .currentIndex1 p{
		text-align: center;
	}
	.checkIn .currentIndex1 .li{
		margin: 20px 0;
		border-bottom: solid 1px #bbb6b6;
		padding-bottom: 15px;
		text-align: center;
	}
	.checkIn .width{
		width: 800px;
		margin: 15px auto;
	}
	.checkIn .span_bottom{
		text-align: center;
		margin: 80px 0;
        margin-top:40px;
	}
	.checkIn .span_bottom span{
		cursor: pointer;
	    display: inline-block;
	    width: 120px;
	    background: rgb(214,114,2);
	    height: 35px;
	    line-height: 35px;
	    border-radius: 48px;
	    color: #fff;
	    font-size: 17px;
	        margin-right: 20px;
	}
	.three_pay img{
		width: 210px;
		height: 70px;
	}
</style>
